<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <!-- 标题 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <!-- title -->
            <p class="card-title-p">
              {{ this.title }}
            </p>
            <a-divider class="card-title-divider"/>
          </a-col>
        </a-row>
        <!-- 卡片集合跑马灯 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <home-swiper>
                <swiper-slide v-for="(slide,index) in slideArr" :key="index">
                  <a-card>
                    <img
                        slot="cover"
                        alt="example"
                        style="height: 15em;"
                        :src="slide.thumbUrl"
                    />
                    <span class="type-span">
                      <p class="type-p" v-if="index !== 3">标&ensp;准&ensp;社</p>
                      <p class="type-p-else" v-else>运&ensp;营&ensp;社</p>
                    </span>
                    <!-- 描述 -->
                    <div>
                      <a-row type="flex" justify="center">
                        <a-col style="text-align: center">
                          <p class="site-name-p">{{ slide.siteName }}</p>
                        </a-col>
                      </a-row>
                      <a-row type="flex" justify="center">
                        <a-col style="text-align: center">
                          <p class="turnover-p">成交额: {{ randomNum(10000,50000) }}元</p>
                        </a-col>
                      </a-row>
                      <a-row type="flex" justify="center">
                        <a-col style="text-align: center">
                          <p class="service-times-p">服务数: {{ randomNum(1000,5000) }}次</p>
                        </a-col>
                      </a-row>
                      <a-row style="text-align: center">
                        <a-button class="detail-button" @click="locationTo(slide.id,'/baseStation.html')">查看详情</a-button>
                      </a-row>
                    </div>
                  </a-card>
                </swiper-slide>
            </home-swiper>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import HomeSwiper from "~/components/swiper/HomeSwiper";
import {SwiperSlide} from 'vue-awesome-swiper'
import {queryGreatSite} from '~/api/home'

export default {
  name: "GreatSite",
  data() {
    return {
      title: '优秀益农社',
      siteName: '新合作农资旧关店',
      turnover: 13456,
      serviceTimes: 1563,
      queryParam:{
        start: 0,
        end: 5
      },
      slideArr: []
    }
  },
  components: {
    HomeSwiper,
    SwiperSlide
  },
  mounted() {
    this.queryList()
  },
  methods: {
    randomNum(minNum, maxNum) {
      return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
    },
    queryList() {
      this.$nextTick(() => {
        queryGreatSite(this.queryParam).then((res) => {
          this.slideArr = res.data
        })
      })
    },
    locationTo(bcId,url) {
      sessionStorage.setItem("task_id",bcId);
      // window.location = localStorage.getItem('contextPrefix') + url
    }
  }
}
</script>

<style lang="scss" scoped>

@import "/assets/styles/base";

.type-span {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(49, 206, 255, 1);
  color: #fff;
  border-bottom-left-radius: 0.5em;
  height: 1.6em;
  width: 4em !important;
  text-align: center;

  .type-p-else {
    background-color: rgba(57, 209, 184, 1);
    border-bottom-left-radius: 0.5em;
  }
}

.site-name-p {
  font-weight: 550;
  font-size: 1.6em;
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.turnover-p {
  color: #059655;
  font-weight: 525;
  font-size: 1.4em;
  letter-spacing: 0.06em;
  margin: 0 0;

}

.service-times-p {
  color: #059655;
  font-weight: 525;
  font-size: 1.4em;
  letter-spacing: 0.06em;
}

.detail-button {
  background-color: #059655;
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 0.1em;
}
</style>
